import { getAllHeroes, getItemName } from '@/lib/data';
import Link from 'next/link';

// 获取英雄数据
const heroes = getAllHeroes();

export default async function BuildsPage() {
  // 为每个英雄的推荐出装获取装备名称
  const heroesWithItemNames = await Promise.all(
    heroes.map(async (hero) => {
      const builds = await Promise.all(
        hero.recommended_builds.map(async (build) => {
          const itemNames = await Promise.all(
            build.map(async (itemId) => {
              return { id: itemId, name: await getItemName(itemId) };
            })
          );
          return itemNames;
        })
      );
      return { ...hero, builds };
    })
  );

  return (
    <div className="space-y-8">
      <h1 className="text-3xl font-bold border-b pb-4">热门出装推荐</h1>
      
      <p className="text-gray-600 mb-8">
        以下是各英雄的推荐出装方案，根据不同的游戏环境和对局情况，可能需要灵活调整。
        出装顺序通常从左到右，但具体情况应根据游戏进程和经济状况决定。
      </p>

      <div className="space-y-12">
        {heroesWithItemNames.map((hero) => (
          <div key={hero.id} className="bg-white shadow-lg rounded-lg p-6">
            <div className="flex items-center gap-4 mb-4">
              <div className="relative w-16 h-16 rounded-full overflow-hidden bg-gray-200">
                {/* 英雄头像占位符 */}
                <div className="absolute inset-0 flex items-center justify-center">
                  <span className="text-xs text-gray-500">{hero.name}</span>
                </div>
              </div>
              <div>
                <h2 className="text-xl font-bold">{hero.name}</h2>
                <p className="text-sm text-gray-600">{hero.title} | {hero.roles.join(', ')}</p>
              </div>
            </div>

            <div className="space-y-6">
              {hero.builds.map((build, buildIndex) => (
                <div key={buildIndex} className="border-t pt-4">
                  <h3 className="font-semibold mb-3">推荐出装 {buildIndex + 1}</h3>
                  <div className="flex flex-wrap gap-4">
                    {build.map((item, itemIndex) => (
                      <Link href={`/items/${item.id}`} key={item.id} className="group">
                        <div className="flex flex-col items-center w-16">
                          <div className="relative w-12 h-12 rounded border bg-gray-200 mb-1 group-hover:ring-2 group-hover:ring-blue-500">
                            {/* 装备图标占位符 */}
                            <div className="absolute inset-0 flex items-center justify-center">
                              <span className="text-xs text-gray-500">图标</span>
                            </div>
                            <span className="absolute -top-2 -left-2 w-5 h-5 bg-blue-600 rounded-full text-white text-xs flex items-center justify-center">
                              {itemIndex + 1}
                            </span>
                          </div>
                          <span className="text-xs text-center truncate w-full group-hover:text-blue-600">{item.name}</span>
                        </div>
                      </Link>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-4 text-right">
              <Link href={`/heroes/${hero.id}`} className="text-blue-600 hover:underline text-sm">
                查看英雄详情 →
              </Link>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
